<style scoped>
    .proClass{
        padding: 0 30px;
    }
    .search{
        margin-bottom: 20px;
    }
    .code-row-bg{
        margin: 20px 0px;
    }

</style>
<style>
    .ivu-table .demo-table-info-cell-cate_name{
        background-color: #F8F8E4 ;
        /*color: red;*/
    }
</style>
<template>
    <div>
        <product-title></product-title>
        <div class="proClass">
           <div class="search">
               <span>快速查找：</span>
                <Input  v-model="search.cate_name" placeholder="请输入名称" style="width: 170px"></Input>
               <Select style="width: 170px;margin-left: 10px;" v-model="search.pid"  >
                   <!--<Option value="0">根分类</Option>-->
                   <Option value="0">全部分类</Option>
                   <template v-for="item in fenlei">
                       <Option :value="item.id" :key="item.id">{{item.cate_name}}</Option>
                   </template>
               </Select>
               <Button type="primary" style="margin-left: 10px;" icon="ios-search" @click="searchBtn">查找</Button>
               <Button type="primary" style="margin-left: 10px;float:right;margin-right: 80px" @click="add" >新增</Button>
           </div>
            <Table  :data="tableData" :columns="columns1" ></Table>
            <Row type="flex" justify="end" class="code-row-bg">
                <Col>
                <Page @on-page-size-change="pageSizeChange" :total="total" show-sizer show-elevator  :page="page" :pase-size="pagesize" @on-change="pageChange"></Page>
                </Col>
            </Row>

        </div>
        <!--<Modal-->
            <!--v-model="delBtn"--
            >
            <!--title="Modal Title"-->
            <!--ok-text="OK"-->
            <!--cancel-text="Cancel">-->
            <!--<p>Something...</p>-->
            <!--<p>Something...</p>-->
            <!--<p>Something...</p>-->
        <!--</Modal>-->
        <!--<Button @click="modal5 = true">Set the width</Button>-->
    </div>
</template>
<script>
import productTitle from '../../components/productTitle.vue';
import { getClassList , delete_cate  ,get_cate_first} from '../../api/parter.js';

export default{
    created(){
//        this.getList();
    },
    activated(){
        new Promise((resolve,reject)=>{
            get_cate_first().then( res =>{
                if(res.data.err==0){
//                    console.log((res.data.data[0]).id);
                    this.fenlei = res.data.data;
                }else{
                    this.$Message.error(res.data.info);
                }
                resolve();
            }).catch(error=>{
                reject(error);
            })
        })
        this.getList();
    },
    data(){
        return {
            search:{
                cate_name:'',
                pid:''
            },
            tableData:[],
            delBtn:false,
            columns1:[
                {
                    title:'分类',
                    key:'cate_name',
//                    align:'center'
                },
//                {
//                    title:' 子分类',
//                    key:'classSon',
//                    align:'center'
//                },
                {
                    title:'操作',
                    width:'200px',
                    key:'aaa',
                    align:'center',
                    render:(h,params)=>{
                        return h('div',[
                            h('Button',{
                                props:{
                                    type: 'primary',
                                    size: 'small'
                                },
                                style:{
                                    marginRight: '10px'
                                },
                                on:{
                                    click:()=>{
//                                        alert(params.row.id)
                                        this.$router.push({name:'com_proedit',params:{id:params.row.id}});
                                    }
                                }
                            },'编辑'),
                            h('Button',{
                                props:{
                                    type: 'error',
                                    size: 'small'
                                },
                                style:{
                                    marginRight: '10px'
                                },
                                on:{
                                    click:()=>{
                                        this.remove(params.row.id);
                                    }
                                }
                            },'删除')
                        ]);
                    }
                }
            ],
            total:0,
            page:1,
            pagesize:10,
            fenlei:[],
            fenleiValue:'0'
        };
    },
    components:{
        productTitle,
    },
    methods:{
        getList(){
            this.search.p = this.page;
            this.search.pagesize= this.pagesize;
            new Promise((resolve,reject)=>{
                getClassList(this.search).then(res =>{
                    if(res.data.err == 0){
                        this.tableData=[];
                        this.total = res.data.data.total;
                        res.data.data.list.map((val,index) =>{
                            let obj = {};
                            if(val.son && val.son.length>0){
                                obj.cate_name=val.cate_name;
                                obj.id=val.id;
//                                obj.className='fenlei1';
                                obj.cellClassName={
                                    cate_name:'demo-table-info-cell-cate_name',
                                    aaa:'demo-table-info-cell-cate_name'
                                };

                                this.tableData.push(obj);
                                val.son.map(calssSon=>{
                                    obj={};
                                    console.log(calssSon)
                                    obj.id=calssSon.id;
                                    obj.cate_name='— '+calssSon.cate_name;
                                    this.tableData.push(obj)
                                });
                            }else{
                                obj.id = val.id;
                                obj.cate_name=val.cate_name;
                                this.tableData.push(obj);
                            }
                        })


//                    if(res.data.err == 0){
//                        res.data.data.list.map((val,index) =>{
//                            let obj={};
//                            if(val.son && val.son.length>0){
//                                let self = me;
//                                val.son.map((sonval,index) =>{
//                                    obj.cate_name=val.cate_name;
//                                    obj.classSon = sonval.cate_name;
//                                    this.tableData.push(obj);
//                                })
//                            }
//                        })
//                        console.log(this.tableData)
                    }else{
                        this.$Message.error(res.data.info);
                    }
                    resolve();
                }).catch(error =>{
                    reject(error);
                });
            });
        },
        remove(value){
            this.$Modal.confirm({
                title:'提示',
                content:'是否要删除该条数据?',
                onOk:() =>{
                    this.del(value);
                }
            });
        },
        del(value){
            new Promise((resolve,reject)=>{
                let params = {
                    id:value
                }
                delete_cate(params).then(res=> {
                    if (res.data.err == 0) {
                        this.getList();
                    } else {
                        this.$Message.error(res.data.info);
                    }
                }).catch(error=>{
                    reject(error);
                });
            });
        },
        add(){
            this.$router.push({name:'com_proedit',params:{id:'',cid:''}});
        },
        searchBtn(){
            this.getList();
        },
        pageChange(page){
            this.page = page;
            this.getList();
        },
        pageSizeChange(pagesize){
            this.page = pagesize;
            this.getList();
        }
    }
};
</script>